<template>
  <div class="app-container">
    <el-form :model="queryParams"  ref="queryForm" size="small" :inline="true" v-show="showSearch" >
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入手机号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请时间" prop="state">
        <el-date-picker v-model="dateRange" style="width: 240px"
          value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"  />
      </el-form-item>
      <el-form-item label="审核状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择" clearable>
          <el-option v-for="dict in statusList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否拨款" prop="appropriation">
        <el-select v-model="queryParams.appropriation" placeholder="请选择" clearable>
          <el-option v-for="dict in statusMoneyList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="用户账号" align="center" prop="mobile" min-width="120" />
      <el-table-column label="用户昵称" align="center" prop="nickName" min-width="120" />
      <el-table-column label="报单数量" align="center" prop="buyCount" min-width="120" />
      <el-table-column label="申请金额" align="center" prop="money" min-width="120" />
      <el-table-column label="拨款金额" align="center" prop="appropriationMoney" min-width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.appropriation == 1">{{scope.row.appropriationMoney}}</p>
        </template>
      </el-table-column>
      <el-table-column label="提交凭证" align="center" prop="certificateUrl" min-width="140">
        <template slot-scope="scope">
          <el-image v-for="(img,index) in scope.row.certificateUrls" :key="index" :src="img" style="width: 60px;height: 60px;" :preview-src-list="[img]" />
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="createTime" width="100" />
      <el-table-column label="审核状态" align="center" prop="state">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 0">待审核</el-tag>
          <el-tag type="success" v-if="scope.row.state === 1">初审通过</el-tag>
          <el-tag type="success" v-if="scope.row.state === 2">复审通过</el-tag>
          <el-tag type="danger" v-if="scope.row.state === 3">审核驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否拨款" align="center" prop="appropriation" min-width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.appropriation === 0">未拨款</el-tag>
          <el-tag v-if="scope.row.appropriation === 1" type="success">已拨款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户备注" align="center" prop="remark" width="140" show-overflow-tooltip />
      <el-table-column label="审核备注" align="center" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <p class="maxWidth" v-if="scope.row.appropriation == 1">{{scope.row.appropriationRemarks}}</p>
          <p class="maxWidth" v-else>{{scope.row.auditRemarks}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-check" @click="handleUpdate(scope.row)" v-show="scope.row.state == 0 || (scope.row.appropriation == 1 && scope.row.state == 1) ">审核</el-button>
          <el-button size="mini" type="text" icon="el-icon-check" @click="handleUpdate(scope.row)" v-show="scope.row.state == 1 && scope.row.appropriation == 0">拨款</el-button>
          <el-button size="mini" type="text" icon="el-icon-close" @click="handleUpdate(scope.row)" v-show="scope.row.state == 3">已拒绝:{{ scope.row.auditRemarks }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-check" v-show="scope.row.appropriation == 1 && scope.row.state == 2">已通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 打款凭证 审核 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户账号" prop="mobile">
          <el-input v-model="form.mobile" disabled />
        </el-form-item>
        <el-form-item label="提交时间" prop="createTime">
          <el-input v-model="form.createTime" disabled />
        </el-form-item>
        <el-form-item label="报单数量" prop="buyCount">
          <el-input-number v-model="buyCountInput" @change="changeNum" :min="1" v-if="form.state == 0" />
          <el-input v-model="form.buyCount" disabled  v-if="form.state == 1" />
        </el-form-item>
        <el-form-item label="打款金额" prop="money">
          <el-input v-model="form.money" disabled />
        </el-form-item>
        <el-form-item label="用户备注" prop="remark">
          <el-input v-model="form.remark" disabled />
        </el-form-item>
        <el-form-item label="打款凭证" prop="certificateUrl">
          <el-image v-for="(img,index) in form.certificateUrls" :key="index" :src="img" style="width: 60px;height: 60px;" :preview-src-list="[img]" />
        </el-form-item>
        <el-form-item label="初审" prop="auditStatus" v-if="form.state == 0">
          <el-radio-group v-model="auditStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="复审" prop="auditStatus" v-if="form.state == 1">
          <el-radio-group v-model="auditStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="修改原因" prop="alterRemark" v-if="boolInput && form.state == 0">
          <el-input v-model="alterRemark" type="textarea" placeholder="请输入原因"></el-input>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemarks">
          <el-input v-model="auditRemarks" type="textarea" placeholder="请输入审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 拨款 -->
    <el-dialog title="拨款" :visible.sync="openLast" width="700px" append-to-body>
      <div class="topInfo flex text-center">
        <p class="w-50">总拨款额度: {{moneyData.allCount || 0}}</p>
        <p class="w-50">当前可用额度: {{moneyData.remainingCount || 0}}</p>
        <p class="w-50 color-gray">已使用额度:  {{moneyData.appropriationCount || 0}}</p>
      </div>
      <el-form ref="form" :model="formLast" :rules="rules" label-width="120px">
        <el-form-item label="用户账号" prop="mobile">
          <el-input v-model="formLast.mobile" disabled />
        </el-form-item>
        <el-form-item label="提交时间" prop="createTime">
          <el-input v-model="formLast.createTime" disabled />
        </el-form-item>
        <el-form-item label="打款金额" prop="money">
          <el-input v-model="formLast.money" disabled />
        </el-form-item>
        <el-form-item label="用户备注" prop="remark">
          <el-input v-model="formLast.remark" disabled />
        </el-form-item>
        <el-form-item label="打款凭证" prop="certificateUrl">
          <el-image v-for="(img,index) in formLast.certificateUrls" :key="index" :src="img" style="width: 60px;height: 60px;" :preview-src-list="[img]" />
        </el-form-item>
        <el-form-item label="账户类型">
          <el-input value="商城余额" disabled />
        </el-form-item>
        <el-form-item label="调整类型">
          <el-radio v-model="radioChooese" label="1">充值</el-radio>
        </el-form-item>
        <el-form-item label="拨款金额" prop="money">
          <el-input v-model="formLast.money" placeholder="请输入拨款金额" disabled />
        </el-form-item>
        <el-form-item label="拨款备注" prop="appropriationRemarks">
          <el-input v-model="appropriationRemarks" type="textarea" placeholder="请输入审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormLast">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDataList, examineDataOneAndTwo,examineDataLast,findAllocateFunds } from "@/api/financialManagement/examine";
import { number } from 'echarts';
import { Debounce } from '@/utils/tools.js'
export default {
  name: "productCate",
  data() {
    return {
      radioChooese: '1',
      checkStatus: 1,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openLast: false,
      // 查询参数
      queryParams: {
        mobile:null,
        pageNo: 1,
        pageSize: 10,
        beginTime: null,
        endTime: null,
        state: null,
      },
      dateRange:[],
      // 表单参数
      form: {},
      formLast: {},
      statusList:[
        {label:'待审核',value:'0'},
        {label:'初审通过',value:'1'},
        {label:'复审通过',value:'2'},
        {label:'审核驳回',value:'3'},
      ],
      statusMoneyList:[
        {label:'未拨款',value:'0'},
        {label:'已拨款',value:'1'},
      ],
      auditStatus: null, //审核状态
      auditRemarks: null, //审核备注
      appropriationMoney: null, //拨款金额
      appropriationRemarks: null, //拨款备注
      alterRemark: null, //修改原因
      buyCountInput: 1, //报单数量
      boolInput: false, //修改原因显示或隐藏
      moneyData: {}, //拨款金额
      // 表单校验
      rules: {
        areaName: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // console.log(this.$store.state.user.roles,'this.$store.state.user')
    // console.log(this.$auth.hasRole("admin"),'this.$auth.hasRole("admin")')
    this.getList();
    this.getMoney();
  },
  watch:{
    dateRange:{
      handler(val){
        if(val.length == 2){
          this.queryParams.beginTime = val[0]
          this.queryParams.endTime = val[1]
        }
      }
    },
    // buyCountInput:{
    //   handler(val){
    //     console.log(val,'val========')
    //     if(this.form.buyCount != val){
    //       this.boolInput = true
    //       this.form.money =  ( Number(val) * 4200 ).toFixed(2);
    //     }else{
    //       this.boolInput = false
    //     }
    //   }
    // }
  },
  methods: {
    changeNum(){
      console.log(this.buyCountInput,'this.buyCountInput')
      this.form.money =  ( Number(this.buyCountInput) * 4200 ).toFixed(2);
      if(this.form.buyCount != this.buyCountInput){
        this.boolInput = true
      }else{
        this.boolInput = false
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/web/customerRecharge/export', {
        ...this.queryParams
      }, `余额充值审核列表${new Date().getTime()}.xlsx`)
    },
    getMoney(){
      findAllocateFunds().then((response) => {
        if(response.code == 200){
          this.moneyData = response.data;
        }
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getDataList(this.queryParams).then((response) => {
        if(response.code == 200){
          this.dataList = JSON.parse(JSON.stringify(response.data));
          this.total = response.extend.total;
          this.loading = false;
        }
      });
    },
    /** 点击审核按钮操作 */
    handleUpdate(row) {
      this.auditStatus = null;
      this.auditRemarks = null;
      this.reset();
      if(this.$store.state.user.roles.indexOf('chushen') !== -1){ //初审角色
        console.log(row,'chushen----------')
        if(row.state == 0 && row.appropriation != 1){
          this.form = row
          this.buyCountInput = row.buyCount;
          this.title = '打款凭证初审'
          this.alterRemark = null;
          this.open = true
        }else if(row.state == 3){
          this.$modal.msgSuccess("审核申请已驳回！");
        }else if(row.state == 1){
          this.formLast = row
          this.openLast = true
        }else{
          this.$modal.msgSuccess("已打款！");
        }
      }else if(this.$store.state.user.roles.indexOf('fushen') !== -1){//复审角色
        console.log(row,'fushen----------')
        if(row.state == 0 && row.appropriation != 1){//初审
          this.$modal.msgSuccess("初审未通过！");
        }else if(row.state == 1 && row.appropriation == 1){//复审
          this.form = row
          this.title = '打款凭证复审'
          this.open = true
        }else if(row.state == 3){
          this.$modal.msgSuccess("审核申请已驳回！");
        }else{
          this.$modal.msgSuccess("已完成！");
        }
      }else if(this.$store.state.user.roles.indexOf('admin') !== -1){//admin角色(可以初审、复审、拨款)
        console.log(row,'admin----------')
        if(row.state == 0 && row.appropriation != 1){
          this.form = row
          this.buyCountInput = Number(row.buyCount);
          this.title = '打款凭证初审';
          this.alterRemark = null;
          this.open = true
        }else if(row.state == 1 && row.appropriation != 1){//打款
          this.formLast = row
          this.openLast = true
        }else if(row.state == 1 && row.appropriation == 1){//复审
          this.form = row
          this.title = '打款凭证复审'
          this.open = true
        }else if(row.state == 3){
          this.$modal.msgSuccess("审核申请已驳回！");
        }else{
          this.$modal.msgSuccess("已完成！");
        }
      }else{//其他用户
        console.log(row,'e4----------')
        this.$modal.msgSuccess("非审核员不能审核！");
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openLast = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.formLast = {};
      this.resetForm("form");
      this.resetForm("formLast");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm:Debounce(function (row) {
      let obj = {
        id: this.form.id,
        state: this.auditStatus,
        auditRemarks: this.auditRemarks,
      }
      let bool = true;
      if(obj.state == 3){
        if(!this.auditRemarks){
          this.$modal.msgError("请输入审核拒绝备注！");
          bool = false;
        }
      }
      if(this.boolInput && this.form.state == 0){
        if(!this.alterRemark){
          this.$modal.msgError("请输入修改原因！");
          bool = false;
        }else{
          obj.buyCount = this.buyCountInput;
          obj.alterRemark = this.alterRemark;
        }
      }
      if(bool){
        examineDataOneAndTwo(obj).then((response) => {
          if(response.code == 200){
            this.$modal.msgSuccess("操作成功");
            this.open = false;
            this.auditStatus = null;
            this.auditRemarks = null;
            this.alterRemark = null;
            this.form = {};
            this.getList();
          }
        });
      }
    },500),
    /** 拨款 提交按钮 */
    submitFormLast:Debounce(function (row) {
      // if(!this.appropriationMoney){
      //   this.$modal.msgError("请输入拨款金额！");
      //   return
      // }else if(!this.appropriationRemarks){
      //   this.$modal.msgError("请输入审核拒绝备注！");
      //   return
      // }else{
        let obj = {
          id: this.formLast.id,
          appropriationMoney: this.formLast.money,
          appropriationRemarks: this.appropriationRemarks,
        }
        examineDataLast(obj).then((response) => {
          if(response.code == 200){
            this.$modal.msgSuccess("操作成功");
            this.openLast = false;
            this.formLast = {};
            this.appropriationRemarks = null;
            this.getList();
          }
        });
      // }
    },500),
  },
};
</script>
<style>
.maxWidth{
  width: 100px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.el-input.is-disabled .el-input__inner{
  color: #606266;
}
.topInfo{
  width: 100%;
  margin-bottom: 20px;
  border-radius: 5px;
  line-height: 50px;
  background: #f6f7fa;
  color: black;
  font-size: 18px;
}
.w-50{
  width: 50%;
}
.flex{
  display: flex;
}
.text-center{
  text-align: center;
}
.color-gray{
  color: gray;
}
</style>
